<template>
    <div class="app-container">
        <div class="address-layout">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="out-border">
                        <div class="layout-title">学习教程</div>
                        <div class="color-main address-content">
                            <a href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="out-border">
                        <div class="layout-title">视频教程</div>
                        <div class="color-main address-content">
                            <a href="https://www.macrozheng.com/mall/catalog/mall_video.html"
                                target="_blank">mall视频教程（2023）</a>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="out-border">
                        <div class="layout-title">点Star支持项目</div>
                        <div class="color-main address-content">
                            <a href="https://github.com/macrozheng/mall" target="_blank">mall项目</a>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="total-layout">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_order" class="total-icon">
                        <div class="total-title">今日订单总数</div>
                        <div class="total-value">200</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_today_amount" class="total-icon">
                        <div class="total-title">今日销售总额</div>
                        <div class="total-value">￥5000.00</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_yesterday_amount" class="total-icon">
                        <div class="total-title">昨日销售总额</div>
                        <div class="total-value">￥5000.00</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="un-handle-layout">
            <div class="layout-title">待处理事务</div>
            <div class="un-handle-content">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待付款订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已完成订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待确认收货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待发货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">新缺货登记</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待处理退款申请</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已发货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待处理退货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">广告位即将到期</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="overview-layout">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">商品总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">400</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">已下架</el-col>
                                <el-col :span="6" class="overview-item-title">已上架</el-col>
                                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                                <el-col :span="6" class="overview-item-title">全部商品</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">用户总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">200</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">1000</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">5000</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                                <el-col :span="6" class="overview-item-title">会员总数</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="statistics-layout">
            <div class="layout-title">订单统计</div>
            <el-row>
                <el-col :span="4">
                    <div style="padding: 20px">
                        <div>
                            <div style="color: #909399;font-size: 14px">本月订单总数</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
                            <div>
                                <span class="color-success" style="font-size: 14px">+10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本周订单总数</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
                            <div>
                                <span class="color-danger" style="font-size: 14px">-10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本月销售总额</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
                            <div>
                                <span class="color-success" style="font-size: 14px">+10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本周销售总额</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
                            <div>
                                <span class="color-danger" style="font-size: 14px">-10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div style="padding: 10px;border-left:1px solid #DCDFE6">
                        <el-date-picker
                            v-model="pickerValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :size="size"
                            @change="pickerChange"
                            :shortcuts="shortcuts"
                        />
                        <div id="charts">
                            
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<!-- 
    setup  是替换了 创建前和创建后
 -->
<script setup lang="ts">
import img_home_order from '@/assets/home/home_order.png';
import img_home_today_amount from '@/assets/home/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/home/home_yesterday_amount.png';
// 引入vue的ref,挂载后生命周期onMounted
import { ref, onMounted } from 'vue';
// 引入大写Ref
import type { Ref } from 'vue';
// 引入echarts 图表
import * as echarts from 'echarts';

// echart图表数据
const DATA_FROM_BACKEND = {
    columns: ['date', 'orderCount','orderAmount'],
    rows: [
        {date: '2018-11-1', orderCount: 10, orderAmount: 1093},
        {date: '2018-11-2', orderCount: 20, orderAmount: 2230},
        {date: '2018-11-3', orderCount: 33, orderAmount: 3623},
        {date: '2018-11-4', orderCount: 50, orderAmount: 6423},
        {date: '2018-11-5', orderCount: 80, orderAmount: 8492},
        {date: '2018-11-6', orderCount: 60, orderAmount: 6293},
        {date: '2018-11-7', orderCount: 20, orderAmount: 2293},
        {date: '2018-11-8', orderCount: 60, orderAmount: 6293},
        {date: '2018-11-9', orderCount: 50, orderAmount: 5293},
        {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
        {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
        {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
        {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
        {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
        {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
    ]
};
// 日期选择器的左边快捷选项
const shortcuts:Array<{
    text: string,
    value: Array<Date> | Function
}> = [
    {
        // 显示在 左边的文字
        text: '最近一周',
        // 选择后日期选择器中显示的内容
        value: [new Date('2018-11-01'), new Date('2018-11-07')],
    },
    {
        text: '最近一月',
        value: () => [new Date('2018-11-01'), new Date('2018-11-15')],
    }
]
// 日期选择器的 尺寸
const size = 'default';
// 初始化的日期
const pickerValue:Ref<Array<string>> = ref(['2018-11-01','2018-11-08']);
// 日期选择器的变化事件

function pickerChange(e:Array<any>):void{
    let arr:Array<string> = [];
    e.forEach(item => {
        // /\// 匹配单个斜杠
        arr.push(new Date(item).toLocaleDateString().replace(/\//g,'-'));
    })
    // 重新调用图表写入数据
    initCharts(initData(arr))
}

// 初始化echarts 图表实例
/* 
    echarts.init(DOM元素)
    最后的图表会在绑定的DOM元素中显示
*/
let myCharts:any|null = null;
// 挂载后的生命周期
onMounted(() => {
    // HTMLElement 的TS类型 
    const dom:HTMLElement | null = document.querySelector('#charts');
    myCharts = echarts.init(dom);
    // 绘制图表
    initCharts(initData(pickerValue.value));
})
// 渲染echarts数据
function initCharts(data: any){
    // 绘制图表
    myCharts.setOption({
        // 浮动的显示数据
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        // X轴的显示数据
        xAxis: {
            data: data.xAlias
        },
        // y坐标轴 的数据
        yAxis: [
            {},
            {}
        ],
        // 图表显示的数据
        series: [
            {
                name: '订单数量',
                type: 'line',
                data: data.yAlias,
                // 按照yAxis的第几个坐标轴渲染数据
                yAxisIndex: 0,
                // 加上这条属性 会显示区域面积
                areaStyle: {
                    color: '#5EE1C7'
                },
                // 开启平滑曲线图
                smooth: true
            },
            {
                name: '订单金额',
                type: 'line',
                data: data.yAliasOther,
                yAxisIndex: 1,
                areaStyle: {
                    color:'#5BBFE3'
                },
                smooth: true
            }
        ]
    })
}
// 处理echarts 数据
function initData(array:Array<string>){
    let arr:Array<{
        date: string,
        orderCount: number,
        orderAmount: number
    }> = []
    // 拿出 所有大于等于第一个日期 并且小于等于第二个日期的所有数据
    arr = DATA_FROM_BACKEND.rows.filter(item => {
        return new Date(array[0]) <= new Date(item.date) && new Date(array[1]) >= new Date(item.date)
    });
    // 取出所有X轴的数据
    let xAlias = arr.map(item => item.date);
    // 取出y轴其中一条数据
    let yAlias = arr.map(item => item.orderCount)
    // 取出y轴其中一条数据
    let yAliasOther = arr.map(item => item.orderAmount);
    
    return {
        xAlias,
        yAlias,
        yAliasOther
    }
}
</script>
  
<style lang="scss" scoped>
.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
}

.address-layout {}

.total-layout {
    margin-top: 20px;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
}
#charts{
    height: 600px;
}
.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
}

.total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}
</style>